<template>
  <div class="dataTables_scrollBody" id="app">

    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

::-webkit-scrollbar {
    width: 5px;
    height: 14px;
}
 
 ::-webkit-scrollbar-thumb {
/* background-color: #01c8dc;
border-radius: 3px; */
    background-color: #b6b6b6;
}
/* //默认不换行
	// 水平垂直居中，竖 */
	.v-hv-center{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	/* //水平居中，垂直顶部，竖 */
	.v-h-center-v-start{
		display: flex;
		flex-direction: column;
		justify-content: start;
		align-items: center;
	}
	/* //水平开头，垂直居中，横 */
	.h-h-start-v-center{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}
	/* // 水平开头，垂直开头，横 */
	.h-hv-start{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-start;
	}
	/* //水平两边有边距，平均分配，垂直居中，横 */
	.h-h-sa-v-center{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
	}
	/* //水平两边无边距，平均分配，垂直居中，横/ */
	.h-h-sb-v-center{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	/* //垂直两边有边距，水平居中，竖 */
	.v-v-sa-h-center{
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
	}
	/* //垂直两边无边距，水平居中，竖 */
	.v-v-sb-h-center{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
	}
	
	/* //换行
	// 水平垂直居中，竖 */
	.v-hv-center-fw{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
	}
	/* //水平居中，垂直顶部，竖 */
	.v-h-center-v-start-fw{
		display: flex;
		flex-direction: column;
		justify-content: start;
		align-items: center;
		flex-wrap: wrap;
	}
	/* //水平开头，垂直居中，横 */
	.h-h-start-v-center-fw{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
	}
	/* // 水平开头，垂直开头，横 */
	.h-hv-start-fw{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-start;
		flex-wrap: wrap;
	}
	/* //水平两边有边距，平均分配，垂直居中，横 */
	.h-h-sa-v-center-fw{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
	}
	/* //水平两边无边距，平均分配，垂直居中，横 */
	.h-h-sb-v-center-fw{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
	}
	/* //垂直两边有边距，水平居中，竖 */
	.v-v-sa-h-center-fw{
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		flex-wrap: wrap;
	}
	/* //垂直两边无边距，水平居中，竖 */
	.v-v-sb-h-center-fw{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
	}
	.v-h-start-v-start{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
	}
	.h-h-sb-v-start{
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}
	.v-h-sb-v-center{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
	}
	.v-h-sa-v-center{
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
	}
</style>
